<template>
  <div class="print-page" v-loading="loading">
    <div>
      <el-button class="bk-print-button" type="success" :title="'打印本页'" @click="doPrint" :disabled="!info.id"
        style="margin-left: 630px;">
        {{ "打印本页" }}
      </el-button>
    </div>
    <DeathTable v-model="info" ref="deathTable" class="print-area" />
  </div>
</template>


<script>
import { getDetailById } from '@/api/record';
import DeathTable from '@/components/DeathTable';

export default {
  name: 'PrintDeathTable',
  components: { DeathTable },
  data() {
    return {
      loading: false,
      info: {}
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    step(time = 0) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, time)
      })
    },
    async doPrint() {
      const node = this.$refs.deathTable.$el;
      let { width: viewWidth, height: viewHeight } = node.getBoundingClientRect()

      document.body.innerHTML = `
        <div style="text-align: center;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                flex-direction: column;
                -webkit-box-align: start;
                -ms-flex-align: start;
                align-items: flex-start;
                -webkit-box-pack: center;
                line-height: 1.2;
                -ms-flex-pack: center;
                width:${viewWidth}px;
                height:${viewHeight}px;
                justify-content: center;">
                ${node.innerHTML}
         </div>
          `;

      await this.step()
      window.print();
      window.location.reload();

      return false;

    },
    async getInfo() {
      try {
        this.loading = true;
        const { data } = await getDetailById(this.$route.query)
        this.loading = false;
        Object.keys(data).forEach(key => {
          this.$set(this.info, key, data[key])
        })
      } catch (error) {
        this.loading = false;
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@page {
  // size: landscape;
  size: portrait
}

.print-page {
  padding: 20px;
  // display: flex;
  // align-items: flex-start;
  // justify-content: center;
}

.print-area {
  // padding: 4px;
  // transform: scale3D(0.85, 0.85, 1);
  // transform-origin: center top;
}
</style>
